<script setup>
import { ref, onMounted, watch } from "vue";
import { projectDetailApi } from "@/api";
import { useRoute } from "vue-router";
const route = useRoute();
const detail = ref({});
const getDetail = () => {
  const params = {
    project_id: route.query.id,
  };
  projectDetailApi(params).then((res) => {
    res.project_apply_process = JSON.parse(res.project_apply_process);
    detail.value = res;
  });
};
watch(
  () => route.query,
  (val) => {
    if (val?.id) getDetail();
  }
);
onMounted(() => {
  getDetail();
});
</script>
<template>
  <div class="max-w-[1500px] mx-auto">
    <img
      :src="detail.project_image_url_1"
      alt=""
      class="w-full h-[250px] lg:h-[300px] object-cover"
    />
  </div>
  <div class="max-w-[1200px] mx-auto">
    <div class="p-3 pt-5 lg:pt-16">
      <!-- 简介 -->
      <div class="grid lg:grid-cols-2 gap-x-10 gap-y-20">
        <!-- 简介 -->
        <div class="w-full flex flex-col gap-5">
          <div class="text-2xl font-bold">{{ detail.project_title }}</div>
          <div class="lg:h-[250px] lg:overflow-y-auto leading-loose">
            {{ detail.project_intro }}
          </div>
        </div>
        <!-- 图片1 + 介绍 -->
        <div class="w-full relative">
          <img
            :src="detail.project_image_url_1"
            alt=""
            class="w-full h-[200px] lg:h-[300px] rounded-md object-cover"
          />
          <div
            class="w-[95%] lg:w-[80%] absolute bottom-0 left-[50%] translate-x-[-50%] translate-y-[50%] bg-white p-4 lg:pl-8 lg:pr-8 rounded-md flex gap-3"
          >
            <div class="flex-1 flex flex-col gap-1">
              <div class="whitespace-nowrap flex gap-1.5 text-base">
                <i class="bi bi-calendar"></i>
                <span>办理周期</span>
              </div>
              <span>{{ detail.project_handle_cycle }}</span>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="whitespace-nowrap flex gap-1.5 text-base">
                <i class="bi bi-person-vcard"></i>
                <span>获得身份</span>
              </div>
              <span>{{ detail.project_obtain_identity }}</span>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="whitespace-nowrap flex gap-1.5 text-base">
                <i class="bi bi-cash-coin"></i>
                <span>资产要求</span>
              </div>
              <span>{{ detail.project_asset_requirements }}</span>
            </div>
          </div>
        </div>
        <!-- 图片2 -->
        <div class="w-full">
          <img
            :src="detail.project_image_url_2"
            alt=""
            class="w-full h-[200px] lg:h-[300px] rounded-md object-cover"
          />
        </div>
        <!-- 申请条件 -->
        <div class="w-full flex flex-col gap-5">
          <div class="text-2xl font-bold">
            {{ detail.project_title }}申请条件
          </div>
          <div class="leading-loose">
            {{ detail.project_apply_conditions }}
          </div>
        </div>
      </div>
      <!-- 流程 -->
      <div class="pt-20">
        <div class="text-3xl text-center mb-12">
          {{ detail.project_title }}申请流程
        </div>
        <div class="flex flex-col gap-10 relative pb-[50px]">
          <div
            class="card flex flex-col gap-3 relative"
            v-for="(item, index) in detail.project_apply_process"
          >
            <div class="flex gap-3 items-center">
              <div
                class="w-[90px] h-[32px] rounded-md leading-[32px] text-center bg-default text-white"
              >
                步骤{{ index + 1 }}
              </div>
              <span class="text-base font-bold"> {{ item.title }}</span>
            </div>
            <div style="text-indent: 2em">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.project {
  &:nth-of-type(1),
  &:nth-of-type(5n) {
    .line1 {
      border-color: #fff !important;
    }
  }
  &:nth-of-type(4n),
  &:nth-last-of-type(1) {
    .line2 {
      border-color: #fff !important;
    }
  }
}

.card {
  background-color: #fff;
  z-index: 998;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
